<template>
  <view class="main">
    <swiper v-if="pictures.length" ref="swiper" class="swiper" :indicator-dots="!!pictures.length" autoplay>
      <swiper-item v-for="url in pictures" :key="url">
        <view class="swiper-item" >
          <view class="content">
            <image :src="url"></image>
            <!-- <text class="title block">每日健康监测功能已开通</text> -->
            <text class="sub-title block">您可自助录入健康监测信息</text>
            <!-- <button class="btn" size="mini" type="primary" @tap="goto('/pages/user/health')">立即体验</button> -->
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="wrapper mt20">
      <view class="btn" @tap="goto('/pages/news/index?lb=1&title=健康教育')">
        <view class="btn-icon success">
          <m-icon type="chatboxes"></m-icon>
        </view>
        <text>健康教育</text>
      </view>
      <view class="btn" @tap="goto('/pages/news/index?lb=2&title=线上课堂')">
        <view class="btn-icon success">
          <m-icon type="chatboxes-filled"></m-icon>
        </view>
        <text>线上课堂</text>
      </view>
      <view class="btn" @tap="getExam">
        <view class="btn-icon primary">
          <m-icon type="compose"></m-icon>
        </view>
        <text>健康评估</text>
      </view>
      <view class="btn" @tap="getListBdLb">
        <view class="btn-icon primary">
          <m-icon type="info-filled"></m-icon>
        </view>
        <text>患者管理</text>
      </view>
      <!-- <picker ref="picker" range-key="name" :range="rangeList" @change="handFabTap" @click.self.native="handleHealthClick">
        <view class="picker-content">
          <view class="btn-icon primary">
            <m-icon type="chat"></m-icon>
          </view>
          <text>健康评估</text>
        </view>
      </picker> -->
      <!-- <picker range-key="name" :range="listBdLb" @change="handlbTap">
        <view class="picker-content">
          <view class="btn-icon primary">
            <m-icon type="info-filled"></m-icon>
          </view>
          <text>患者管理</text>
        </view>
      </picker> -->
      <view class="btn" @tap="gotoUrl(link)">
        <view class="content">
          <view class="btn-icon error">
            <m-icon type="chat"></m-icon>
          </view>
          <text>就诊咨询</text>
        </view>
      </view>
    </view>
    <view class="wrapper">
      <view class="btn" @tap="goto('/pages/question/list')">
        <view class="content">
          <view class="btn-icon error">
            <m-icon type="paperplane"></m-icon>
          </view>
          <text>问卷结果</text>
        </view>
      </view>
    </view>
    <text class="title m20">服务提醒</text>
    <pane-card class="card" title="健康评估提醒" :subTitle="rangeList.length > 0 ? '您有一个健康评估提醒，请查看' : ''" :badge="rangeList.length > 0" @next="getExam">
      <view class="icon" slot="icon">
        <m-icon fill type="chat"></m-icon>
      </view>
    </pane-card>
    <!-- <picker range-key="name" :range="rangeList" @change="handFabTap">
      <view class="inner">
        <pane-card class="card" title="健康评估提醒" subTitle="您有一个健康评估提醒，请查看" :badge="rangeList.length > 0" @next="showExamPicker">
          <view class="icon" slot="icon">
            <m-icon fill type="chat"></m-icon>
          </view>
        </pane-card>
      </view>
    </picker> -->
    <!-- <pane-card title="健康监测提醒" subTitle="您每日的健康监测，请查看..." next="/pages/user/health" badge>
      <view class="icon" slot="icon">
        <m-icon fill type="chat"></m-icon>
      </view>
    </pane-card> -->
    <v-picker :visible.sync="showPicker" @confirm="handFabTap">
      <picker-view-column>
        <view class="item" v-for="(item,index) in rangeList" :key="index">{{item.name}}</view>
      </picker-view-column>
    </v-picker>
    <v-picker :visible.sync="showAccountPicker" @confirm="handlbTap">
      <picker-view-column>
        <view class="item" v-for="(item,index) in listBdLb" :key="index">{{item.name}}</view>
      </picker-view-column>
    </v-picker>
  </view>
</template>
<script>
  import Api from '@/api/main'
  import PaneCard from '@/components/m-card/pane-card.vue'
  import MIcon from '@/components/m-icon/m-icon.vue'
  import VPicker from '@/components/v-picker.vue'

  export default {
    components: {
      PaneCard,
      MIcon,
      VPicker
    },
    data() {
      return {
        interval: 3000,
        indicatorDots: false,
        showPicker: false,
        showAccountPicker: false,
        code: '',
        link: '',
        pictures: [
          // 'https://zyb-yayapub-1253445850.file.myqcloud.com/fe/videoErrBag.png',
          // 'https://zyb-yayapub-1253445850.file.myqcloud.com/fe/videoErrBag.png'
        ],
        listBdLb: [
          // {
          //   "id": "id",
          //   "name": "name",
          //   "desc": "desc"
          // }
        ],
        rangeList: [
          // {
          //   id: 1,
          //   name: '问卷一',
          //   label: '类型一',
          //   type: 1,
          //   zjhm: 1,
          //   url: '/pages/health/exam-swiper'
          // },
          // {
          //   id: 2,
          //   label: '类型二',
          //   name: '问卷二',
          //   type: 2,
          //   zjhm: 2,
          //   url: '/pages/health/exam-full'
          // }
        ]
      }
    },
    computed: {
      getSwiperLen() {
        if (!this.$refs.swiper) {
          return false
        }
        return this.$refs.swiper.length
      }
    },
    methods: {
      handleHealthClick(e) {
        console.log('e', e);
      },
      gotoUrl(url) {
        if (url) {
          window.open(url)
        }
      },
      goto(url) {
        uni.navigateTo({
          url: url
        })
      },
      getDate(time = Date.now()) {
        const date = new Date(time);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      showModel() {
        const time = Date.now() + 21 * 24 * 60 * 60 * 1000
        const date = this.getDate(time)
        uni.showModal({
          title: '提示',
          showCancel: false,
          content: `预计解除隔离时间：${date}`
        })
        // this.$refs.popup.open()
        // this.$refs.popup.$trigger()
      },
      handFabTap(index) {
        console.log('handFabTap', index);
        if (!this.rangeList || !this.rangeList.length) {
          return
        }
        const value = this.rangeList[index]

        let url = `/pages/health/add-user?id=${value.id}&name=${value.name}&type=${value.type}&zjhm=${value.zjhm}`
        console.log('rang-url', url);

        // if (value.type === 1) {
        //   url = `/pages/health/exam-swiper?id=${value.id}&name=${value.name}&type=${value.type}`
        // } else {
        //   url = `/pages/health/exam-full?id=${value.id}&name=${value.name}&type=${value.type}`
        // }
        uni.navigateTo({
          url
        });
      },
      // 点击患者管理
      handlbTap(index) {
        // 先选择风险等级
        console.log('listBdLb', index);
        if (!this.listBdLb || !this.listBdLb.length) {
          return
        }
        // const { value: index } = val.detail
        const value = this.listBdLb[index]

        let url = `/pages/account/list?lbid=${value.id}`
        console.log('rang-url', url);
        uni.navigateTo({
          url
        });
      },
      // 获取轮播图
      async getScrollingPictures() {
        const pictures = await this.$http.post(Api.getScrollingPictures, {}, { showToast: false })
        this.pictures = pictures || []
      },
      // 展示问卷类型
      showExamPicker() {
        console.log('rangeList', this.rangeList);
        if (this.rangeList && this.rangeList.length) {
          this.showPicker = true
        }
      },
      // 获取问卷类型
      async getExam(showToast = true) {
        const res = await this.$http.post(Api.listQuestionnaires, {}, { showToast: false });
        if (res) {
          this.rangeList = res
          this.showPicker = true
        }
      },
      // 获取患者类型
      async getListBdLb() {
        const res = await this.$http.post(Api.listBdLb)
        if (res) {
          this.listBdLb = res
          this.showAccountPicker = true
        }
      },
      // 获取就诊咨询跳转地址
      async getLink() {
        const res = await this.$http.post(Api.getConfig, {}, { showToast: false })
        if (res) {
          this.link = res
        }
      },
      // 选择风险类型
      confirm(val) {
        if (!this.riskTyleList && !this.riskTyleList.length) {
          return
        }

        const { value: index } = val.detail
        const value = this.riskTyleList[index]
        if (!value) {
          return
        }
        const url = `/pages/user/transfer?risk=${value.id}`
        this.goto(url)
      }
    },
    onLoad({ code }) {
      this.code = code
      console.log('onLoad', code);
      this.getExam(false)
      this.getScrollingPictures()
      this.getLink()
    },
    onShow() {
      // this.getListBdLb()
    }
  }
</script>
<style lang="scss">
  .main {
    width: 100%;
    height: 100%;
    padding: 40rpx 40rpx 0;

    .swiper {
      height: 300rpx;
    }

    .wrapper {
      // margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 2.5;

        &-icon {
          width: 76rpx;
          height: 76rpx;
          font-size: 38rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: #fff;

          &.primary {
            background-color: $uni-color-primary;
          }

          &.success {
            background-color: $uni-color-success;
          }

          &.warning {
            background-color: $uni-color-warning;
          }

          &.error {
            background-color: $uni-color-error;
          }
        }

        text {
          font-size: 26rpx;
        }
      }

      .content {
        width: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .swiper-item {
      // padding: 40rpx 30rpx 0 30rpx;
      height: 100%;
      background-color: rgba($color: $uni-color-primary, $alpha: 0.08);
      // border-radius: 32rpx;

      .btn {
        margin-top: 40rpx;
      }
    }

    .content {
      width: 100%;
      height: 100%;
      text-align: center;

      // line-height: 2;
      // padding: 40rpx
      image {
        width: 100%;
        height: 100%;
        border-radius: 32rpx;
      }
    }

    .title {
      font-size: 36rpx;
      font-weight: 500;
    }

    .sub-title {
      font-size: 24rpx;
      color: $uni-sub-text-color;
    }

    .mt20 {
      margin-top: 20px;
    }

    .m20 {
      display: block;
      margin: 40rpx 0;
    }

    .icon {
      border-radius: 14rpx;
      background-color: rgba($color: $uni-color-primary, $alpha: 0.1);
      color: $uni-color-primary;
    }

    .picker-content {
      // text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 2.5;
    }

    picker {
      width: auto;
    }


  }

  button[type=primary] {
    background-color: $uni-color-primary;
  }
</style>